<template>
    <el-dialog
        :title="'编辑' + info"
        :visible.sync="visibility"
        :modal="true"
        :close-on-click-modal="false"
        class="editDialog"
        :append-to-body="true"
        ref="deleteDialog"
        @close="cancelDialog"
    >
        <div class="content">
            <div class="top">
                <div>
                    <el-input
                        v-model="input"
                        clearable
                        placeholder="请输入内容"
                        :autofocus="true"
                    ></el-input>
                </div>
            </div>
            <div class="footer">
                <el-button type="primary" @click="cancelDialog"
                    >取&nbsp;&nbsp;消</el-button
                >
                <el-button type="primary" @click="confirmDialog"
                    >确&nbsp;&nbsp;定</el-button
                >
            </div>
        </div>
    </el-dialog>
</template>
<script>
export default {
  name: 'noteDialog',
  props: {
    dialogVisible: false,
    currentItem: {}
  },
  data () {
    return {
      input: '',
      visibility: false,
      info: ''
    }
  },
  computed: {},
  components: {},
  watch: {
    dialogVisible (val) {
      this.input = this.currentItem.remark
      this.info = '备注'
      this.visibility = val
    }
  },
  mounted () {},
  methods: {
    cancelDialog () {
      this.visibility = false
      this.$emit('on-cancel', false)
    },
    confirmDialog () {
      this.$emit('on-edit', this.input)
    }
  }
}
</script>
<style lang="styl">
.editDialog {
    .el-dialog {
        width: 310px;
        margin-top: 32vh !important;
    }

    .el-dialog__header {
        padding: 0;
        text-align: center;
        line-height: 36px;
        background: #f8f8f8;
    }

    .el-input__icon {
        line-height: 32px;
    }

    .el-dialog__body {
        padding: 16px 20px;
    }

    .content {
        text-align: center;

        .top {
            h1 {
                text-align: left;
                font-size: 16px;
                font-weight: bold;
                margin-bottom: 10px;
            }
        }

        .footer {
            margin-top: 16px;
            display: flex;
            align-items: center;
            justify-content: space-evenly;

            .el-button--primary {
                width: 80px;
                height: 26px;
            }
        }
    }
}
</style>
